<template>
  <div class="pc-body">
    <div class="swiper-container">
      <div class="loop-swiper">
        <el-carousel :height="carouselHeight+'px'" :key="carouselHeight">
          <el-carousel-item :key="i" v-for="(item , i) in bannerList">
            <img :src="item.src" @load="imgLoad" alt class="carouselHeight">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="active-scene">
      <div class="active-scene-title">互动应用场景</div>
      <div class="active-scene-describe">适用于会议高端展示和现场互动,为您的会议PPT升级,梦数互动为您带来最佳的体验</div>
      <div class="active-scene-kind">
        <ul>
          <li @click="activeSceneKindClick" class="active-scene-kind-item" data-id="1">
            <div class>
              <i class="one"></i>
            </div>
            <span>营销活动</span>
          </li>
          <li @click="activeSceneKindClick" class="active-scene-kind-item selected" data-id="2">
            <div>
              <i class="two"></i>
            </div>
            <span>企业年会</span>
          </li>
          <li @click="activeSceneKindClick" class="active-scene-kind-item" data-id="3">
            <div>
              <i class="three"></i>
            </div>
            <span>现场展会</span>
          </li>
          <li @click="activeSceneKindClick" class="active-scene-kind-item" data-id="4">
            <div>
              <i class="four"></i>
            </div>
            <span>活动派对</span>
          </li>
        </ul>
      </div>
      <div class="active-scene-container">
        <div>
          <div class="active-scene-container-title">
            <span>{{cooperateCaseListOther[activeSceneItem-1].title}}：</span>
            <p>{{cooperateCaseListOther[activeSceneItem-1].dis}}</p>
          </div>
          <div class="active-scene-container-items">
            <div class="active-scene-container-item">
              <div
                :key="item.id"
                class="container"
                v-for="item in cooperateCaseListOther[activeSceneItem-1].images"
              >
                <div>
                  <div class="text-item-image">
                    <el-image :src="item.src"></el-image>
                  </div>
                  <div class="text-item-wrap">
                    <div class="text-item">{{item.title}}</div>
                    <!-- <span class="text-item-dis">{{item.dis}}</span> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-superiority">
      <div class="my-superiority-title">我们的优势</div>
      <div class="my-superiority-describe">梦数互动会议提供一站式服务，为您的会议活动增光添彩</div>
      <div class="my-superiority-content">
        <div class="container">
          <div>
            <div class="my-superiority-content-top">
              <img src="../../src/assets/imgs/advantage/advantage_1.png">
            </div>
            <div class="my-superiority-content-down">
              <label>简单</label>
              <p>一台电脑一部手机就能轻松应对</p>
            </div>
          </div>
        </div>
        <div class="container">
          <div>
            <div class="my-superiority-content-top">
              <img src="../../src/assets/imgs/advantage/advantage_2.png">
            </div>
            <div class="my-superiority-content-down">
              <label>高效</label>
              <p>操作简单一分钟就可创建活动场景</p>
            </div>
          </div>
        </div>
        <div class="container">
          <div>
            <div class="my-superiority-content-top">
              <img src="../../src/assets/imgs/advantage/advantage_3.png">
            </div>
            <div class="my-superiority-content-down">
              <label>强大</label>
              <p>自主研发大屏编辑器，设计随心所欲，可导入PPT文件</p>
            </div>
          </div>
        </div>
        <div class="container">
          <div>
            <div class="my-superiority-content-top">
              <img src="../../src/assets/imgs/advantage/advantage_4.png">
            </div>
            <div class="my-superiority-content-down">
              <label>稳定</label>
              <p>来自500强的研发和运维团队，保证系统稳定</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="live-case">
      <div class="live-case-title">现场案例</div>
      <div class="live-case-content">
        <div class="live-case-content-body">
          <div
            :key="item.id"
            @click="liveCaseItemCLick"
            class="container"
            v-for="item in cooperateCaseListThree[caseIndex].data"
          >
            <div>
              <el-image :src="item.src"></el-image>
              <!-- <div class="text-item-wrap"> -->
              <!-- <span class="text-item">{{item.title}}</span>
              <span class="text-item-dis">{{item.dis}}</span>-->
              <!-- </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="live-case-switch">
        <div>
          <ul class="live-case-switch-ul">
            <li
              :class="ii.selected"
              :key="ii.index"
              @click="liveCaseSwitch(ii)"
              class="live-case-switch-li"
              v-for="ii in cooperateCaseListThree"
            >
              <button class></button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="user-appraise">
      <div class="user-appraise-title">用户评价</div>
      <div class="user-appraise-describe">产品使用效果如何，看看他们怎么说</div>
      <div class="user-appraise-content">
        <div class="user-appraise-content-wrap">
          <div
            :key="item.id"
            class="container"
            v-for="item in userAppraiseImages[userAppraiseIndex].data"
          >
            <div @click="userAppraiseItemCLick">
              <div class="image-wrap">
                <div class="image-wrap-back"></div>
                <el-image :src="item.src"></el-image>
              </div>
              <div class="user-appraise-content-name">{{item.name}}</div>
              <div class="user-appraise-content-star"></div>
              <div class="user-appraise-content-say">
                <div class="triangle-one"></div>
                <div>{{item.say}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="user-appraise-switch">
        <div>
          <ul class="user-appraise-switch-ul">
            <li
              :class="ii.selected"
              :key="ii.index"
              @click="userAppraiseSwitch(ii)"
              class="user-appraise-switch-li"
              v-for="ii in userAppraiseImages"
            >
              <button class></button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="data-statistics">
      <div class="data-statistics-title">数据说话</div>
      <div class="data-statistics-describe"></div>
      <div class="data-statistics-content">
        <img class="data-img" src="../assets/imgs/home/static-data.png">
      </div>
    </div>
    <div class="some-customers">
      <div class="some-customers-title">部分客户</div>
      <div class="some-customers-content">
        <div class="some-customers-content-wrap">
          <div class="some-customers-content-items">
            <div :key="item.id" class="container" v-for="item in someCustomersImages">
              <div>
                <img :src="item.src" @load="loadImg">
              </div>
            </div>
            <!-- <div>
              <img src="../assets/imgs/customers/部分客户1.jpg">
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="pc-ad">
      <img
        @click="goSign('signIn')"
        @load="loadImg1"
        class="ad-img"
        src="../assets/imgs/home/pc-ad.png"
      >
    </div>
    <login :dialogVisible="dialogVisible" :isSignIn="isSignIn" @close="closeDialog"></login>
    <div @click="close" class="login-mask" tabindex="0" v-if="showmask"></div>
  </div>
</template>

<script>
import banner_1 from '../assets/imgs/banner_1.jpg';
import banner_2 from '../assets/imgs/banner_2.png';
import banner_3 from '../assets/imgs/banner_3.png';
import bg_1 from '../assets/imgs/bg_1.png';
import bg_2 from '../assets/imgs/bg_2.png';
import bg_5 from '../assets/imgs/bg_5.png';
import bg_3 from '../assets/imgs/bg_3.png';
import bg_4 from '../assets/imgs/bg_4.png';
import * as QRCode from 'qrcode';
import { request } from 'http';
import login from './html/login';

export default {
    name: 'home',
    components: {
        login,
    },
    data() {
        return {
            showmask: false,
            dialogVisible: false,
            isSignIn: '',
            bannerList: [
                { src: require('../assets/imgs/banner/banner_11.png') },
                { src: require('../assets/imgs/banner/banner_12.png') },
                { src: require('../assets/imgs/banner/banner_13.png') },
                { src: require('../assets/imgs/banner/banner_14.png') },
                { src: require('../assets/imgs/banner/banner_15.png') },
            ],
            cooperateCaseList: [
                { src: bg_1, title: '国寿上海分公司财富传家私享会' },
                { src: bg_2, title: '国寿上海分公司远航计划启动会' },
                { src: bg_5, title: '太平洋保险产销会' },
            ],
            cooperatePartnerList: [{ src: bg_4 }, { src: bg_3 }],
            dialogVisible: false,
            account: {
                username: '',
                password: '',
                nickName: '',
                mobile: '',
            },
            isLoging: false,
            isRemember: true,
            carouselHeight: 500,
            keys: 1,
            signUp: false,
            rules: {
                nickName: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    {
                        pattern: /^\S+$/,
                        message: '账号不能含有空格',
                        trigger: 'blur',
                    },
                    {
                        min: 6,
                        message: '账号不能少于 6 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[1][345678][0-9]{9}/,
                        message: '手机号格式不正确',
                        trigger: 'change',
                    },
                ],
            },
            tabPosition: 'top',
            cooperateCaseListOther: [
                {
                    index: 1,
                    title: '营销活动',
                    dis:
                        '产说会,创说会,表彰会,展销会,答谢会,启动会为您的业务添砖加瓦',
                    images: [
                        {
                            id: '1223',
                            src: require('../assets/imgs/home/active/marketing/scrolling-ticker.png'),
                            title: '滚屏播报',
                            dis: '炫酷的抽奖方式',
                        },
                        {
                            id: '1224',
                            src: require('../assets/imgs/home/active/marketing/sign.gif'),
                            title: '微信签到',
                            dis: '炫酷的抽奖方式',
                        },
                        {
                            id: '1225',
                            src: require('../assets/imgs/home/active/marketing/lucky.gif'),
                            title: '大屏抽奖',
                            dis: '炫酷的抽奖方式',
                        },
                        {
                            id: '1226',
                            src: require('../assets/imgs/home/active/marketing/carousel.png'),
                            title: '轮播展示',
                            dis: '实力全粉，彰显企业魅力',
                        },
                    ],
                },
                {
                    index: 2,
                    title: '企业年会',
                    dis: '营造会议氛围，让观众high起来，实力圈粉，彰显企业魅力',
                    images: [
                        {
                            id: '1223',
                            src: require('../assets/imgs/home/active/metting/sign1.gif'),
                            title: '微信签到',
                            dis: '炫酷的抽奖方式',
                        },
                        {
                            id: '1224',
                            src: require('../assets/imgs/home/active/metting/bullet.png'),
                            title: '微信弹幕',
                            dis: '炫酷的抽奖方式',
                        },
                        {
                            id: '1225',
                            src: require('../assets/imgs/home/active/metting/guest.png'),
                            title: '嘉宾介绍',
                            dis: '炫酷的抽奖方式',
                        },
                        {
                            id: '1226',
                            src: require('../assets/imgs/home/active/metting/carousel.png'),
                            title: '轮播展示',
                            dis: '实力圈粉，彰显企业魅力',
                        },
                        // {
                        //     id: '1227',
                        //     src: bg_5,
                        //     title: '倒计时',
                        //     dis: '炫酷的抽奖方式',
                        // },
                        // {
                        //     id: '1228',
                        //     src: bg_1,
                        //     title: '抢红包',
                        //     dis: '炫酷的抽奖方式',
                        // },
                        // {
                        //     id: '1229',
                        //     src: bg_2,
                        //     title: '观众抽奖',
                        //     dis: '炫酷的抽奖方式',
                        // },
                    ],
                },
                {
                    index: 3,
                    title: '现场展会',
                    dis: '提升展会规格，促进企业文化和产品的展示',
                    images: [
                        {
                            id: '1223',
                            src: require('../assets/imgs/home/active/exhibition/scrolling-ticker.png'),
                            title: '滚屏播报',
                            dis: '',
                        },
                        {
                            id: '1224',
                            src: require('../assets/imgs/home/active/exhibition/carousel.png'),
                            title: '轮播展示',
                            dis: '',
                        },
                        // { id: '1225', src: bg_1, title: '音轨特效', dis: '' },
                        // { id: '1226', src: bg_2, title: '互动小游戏', dis: '' },
                        // { id: '1227', src: bg_5, title: '留言墙', dis: '' },
                    ],
                },
                {
                    index: 4,
                    title: '活动派对',
                    dis: '活跃现场气氛，让与会者玩得更high，更尽兴',
                    images: [
                        {
                            id: '1222',
                            src: require('../assets/imgs/home/active/party/sign2.gif'),
                            title: '微信签到',
                            dis: '实力全粉，彰显企业魅力',
                        },
                        {
                            id: '1223',
                            src: require('../assets/imgs/home/active//party/bullet.png'),
                            title: '微信弹幕',
                            dis: '炫酷的抽奖方式',
                        },
                        // {
                        //     id: '1224',
                        //     src: bg_5,
                        //     title: '互动小游戏',
                        //     dis: '炫酷的抽奖方式',
                        // },
                        // {
                        //     id: '1225',
                        //     src: bg_1,
                        //     title: '轮播展示',
                        //     dis: '炫酷的抽奖方式',
                        // },
                        // {
                        //     id: '1226',
                        //     src: bg_2,
                        //     title: '留言墙',
                        //     dis: '实力全粉，彰显企业魅力',
                        // },
                    ],
                },
            ],
            cooperateCaseListThree: [
                {
                    index: 0,
                    selected: 'selected',
                    data: [
                        {
                            id: '1224',
                            src: require('../assets/imgs/case/case1.png'),
                            title: '腾讯移动游戏商务发布会',
                            dis: '',
                        },
                        {
                            id: '1226',
                            src: require('../assets/imgs/case/case2.png'),
                            title: '流通渠道新品订货会',
                            dis: '',
                        },
                        {
                            id: '1222',
                            src: require('../assets/imgs/case/case3.png'),
                            title: '090911-西门子工博会高峰论坛',
                            dis: '',
                        },
                        {
                            id: '1223',
                            src: require('../assets/imgs/case/case4.png'),
                            title: '东风雪铁龙C5发布会汇报方案',
                            dis: '',
                        },
                        {
                            id: '1227',
                            src: require('../assets/imgs/case/case5.png'),
                            title: '照明IBU经销商大会',
                            dis: '',
                        },
                        {
                            id: '1229',
                            src: require('../assets/imgs/case/case6.png'),
                            title: '090911-西门子工博会高峰论坛',
                            dis: '',
                        },
                    ],
                },
                {
                    index: 1,
                    selected: '',
                    data: [
                        {
                            id: '1222',
                            src: require('../assets/imgs/case/case7.png'),
                            title: '090911-西门子工博会高峰论坛',
                            dis: '',
                        },
                        {
                            id: '1223',
                            src: require('../assets/imgs/case/case8.png'),
                            title: '东风雪铁龙C5发布会汇报方案',
                            dis: '',
                        },
                        {
                            id: '1224',
                            src: require('../assets/imgs/case/case9.png'),
                            title: '腾讯移动游戏商务发布会',
                            dis: '',
                        },
                        {
                            id: '1225',
                            src: require('../assets/imgs/case/case10.png'),
                            title: 'FA001XX化妆品新闻发布会',
                            dis: '',
                        },
                        {
                            id: '1226',
                            src: require('../assets/imgs/case/case11.png'),
                            title: '流通渠道新品订货会',
                            dis: '',
                        },
                        {
                            id: '1227',
                            src: require('../assets/imgs/case/case12.png'),
                            title: '照明IBU经销商大会',
                            dis: '',
                        },
                    ],
                },
            ],
            activeSceneItem: '2',
            caseIndex: 0,
            userAppraiseImages: [
                {
                    index: 0,
                    selected: 'selected',
                    data: [
                        {
                            id: '1222',
                            src: require('../assets/imgs/photo/photo1.png'),
                            name: '中国人寿个险部李总',
                            say:
                                '我们常年会举办各种启动会和高端产说会，几次合作下来已经十分信梦数互动，让办会的档次提升了不少，给客户的感觉非常棒',
                        },
                        {
                            id: '1223',
                            src: require('../assets/imgs/photo/photo2.png'),
                            name: '太平洋保险上海分公司樊经理',
                            say:
                                '每次都绞尽脑汁的想让产说会更加有创意，自从使用了智慧互动的滚屏和抽奖功能，现场氛围非常好，客户对我们公司的品牌认可更强了',
                        },
                        {
                            id: '1224',
                            src: require('../assets/imgs/photo/photo3.png'),
                            name: '左旗财富CEO姚总',
                            say:
                                '客户高端品酒会是我们公司的传统，品酒会一方面想要让客户对公司更加认同另一方面让客户购买更多公司的理财产品，梦数互动起码让我们的签单率提升了20% ',
                        },
                        {
                            id: '1221',
                            src: require('../assets/imgs/photo/photo4.png'),
                            name: '中国人寿上海分公司薛经理',
                            say:
                                '增员是公司发展的关键，公司举办创业说明会也非常的频繁，使用了梦数互动的产品之后，提升了公司形象，准增员人对我们更加认同了。',
                        },
                        {
                            id: '1220',
                            src: require('../assets/imgs/photo/photo5.png'),
                            name: '平安人寿区经理吴总',
                            say:
                                '作为本地个人保险品牌的标杆，举办客户联谊私享会是最好的与客户互动的手段，使用梦数互动产品之后，客户对我本人的服务意识更加认可了。',
                        },
                        {
                            id: '1227',
                            src: require('../assets/imgs/photo/photo6.png'),
                            name: '平安人寿组训小刘',
                            say:
                                '梦数互动真是一个很棒的产品，可以把PPT直接上传展示，互动的过程当中不会在PPT和浏览器之间来回切换，领导也对我组织的产说会的现场效果非常满意。',
                        },
                        {
                            id: '1228',
                            src: require('../assets/imgs/photo/photo7.png'),
                            name: '招商证券营业部投资顾问张经理',
                            say:
                                '营业部定期会举行投资者见面会，梦数互动的3D签到和抽奖功能真好用，不仅解决了我们人手不足的问题，还让投资者们眼前一亮。',
                        },
                        {
                            id: '1226',
                            src: require('../assets/imgs/photo/photo8.png'),
                            name: '陆金所客户营销总监陈总',
                            say:
                                '我们一直想引进3D高科技效果到客户见面会的流程中来，感谢梦数互动提供了那么好的工具。',
                        },
                    ],
                },
                {
                    index: 1,
                    selected: '',
                    data: [
                        {
                            id: '1222',
                            src: require('../assets/imgs/photo/photo9.png'),
                            name: '新致软件李总',
                            say:
                                '公司年会用到了梦数互动的弹幕和抽奖功能，下面员工玩得都非常的high，这才是年会该有的样子',
                        },
                        {
                            id: '1223',
                            src: require('../assets/imgs/photo/photo10.png'),
                            name: '春笛信息科技马总',
                            say:
                                'it员工比较内向什么都不想参与，而梦数互动提供了很好的工具，公司年会上使用微信进行互动之后员工们参与度一下子提升了不少',
                        },
                        {
                            id: '1224',
                            src: require('../assets/imgs/photo/photo11.png'),
                            name: '爱蔚宝月子会所张总',
                            say:
                                '用了梦数互动的产品，员工和客户对活动的效果都很满意，我们也推荐了身边的朋友来使用，真是非常推荐！现在科技真是越来越先进了。',
                        },
                        {
                            id: '1221',
                            src: require('../assets/imgs/photo/photo12.png'),
                            name: '青岛三农富康张总',
                            say:
                                '在我们的肥料产品展销会上使用了梦数互动的滚屏功能，场下的供应商们表示非常震撼，估计我们是农产品厂商里最懂得高科技营销的',
                        },
                    ],
                },
            ],
            userAppraiseIndex: 0,
            userAppraiseContentStarModel: 5,
            someCustomersImages: [
                {
                    id: '11',
                    src: require('../assets/imgs/customers/cus1.png'),
                },
                {
                    id: '12',
                    src: require('../assets/imgs/customers/cus2.png'),
                },
                {
                    id: '13',
                    src: require('../assets/imgs/customers/cus3.png'),
                },
                {
                    id: '14',
                    src: require('../assets/imgs/customers/cus4.png'),
                },
                {
                    id: '15',
                    src: require('../assets/imgs/customers/cus5.png'),
                },
                {
                    id: '32',
                    src: require('../assets/imgs/customers/cus6.png'),
                },
                {
                    id: '43',
                    src: require('../assets/imgs/customers/cus7.png'),
                },
                {
                    id: '54',
                    src: require('../assets/imgs/customers/cus8.png'),
                },
                {
                    id: '35',
                    src: require('../assets/imgs/customers/cus9.png'),
                },
                {
                    id: '46',
                    src: require('../assets/imgs/customers/cus10.png'),
                },
                {
                    id: '71',
                    src: require('../assets/imgs/customers/cus11.png'),
                },
                {
                    id: '66',
                    src: require('../assets/imgs/customers/cus12.png'),
                },
            ],
            qrCodeUrl: '',
            qqData: [
                { name: '邮箱', value: 'hezuo@kaixinnc.com' },
                { name: '客服QQ', value: '123321124' },
                { name: 'QQ群', value: '22463434' },
            ],
        };
    },
    // beforeMount() {
    //     this.setCarouselHeight();
    // },
    mounted() {
        this.createQrcode('http://localhost:9090/#/');
        // 图片自适应
        this.loadImg();
        this.loadImg1();
        this.imgLoad();
        window.addEventListener(
            'resize',
            () => {
                this.loadImg();
                this.loadImg1();
                this.imgLoad();
            },
            false
        );
        // 确保active-scene-container-item子元素是4的倍数
        // var active_scene_container_item = document.getElementsByClassName(
        //     'active-scene-container-item'
        // )
        // if (active_scene_container_item[0].children.length % 4 != 0) {
        //     var len = 4 - (active_scene_container_item[0].children.length % 4)
        //     for (var i = 0; i < len; i++) {
        //         var node = document.createElement('div')
        //         node.className = 'container'
        //         node.style.visibility = 'hidden'
        //         active_scene_container_item[0].appendChild(node)
        //     }
        // }
    },
    methods: {
        // setCarouselHeight() {
        //     var width = document.body.clientWidth;
        //     this.carouselHeight = (width / 1920) * 700;
        // console.log(this.carouselHeight);
        // },
        goSign(a) {
            this.dialogVisible = !0;
            this.$emit('showLogin', true);
            this.isSignIn = a === 'signIn';
            this.showmask = true;
        },
        closeDialog(a) {
            this.dialogVisible = !1;
            this.showmask = false;
            this.$emit('showLogin', false);
        },
        close() {
            this.showmask = false;
        },
        showSignUp() {
            this.signUp = !this.signUp;
        },
        handleLogin() {
            if (this.signUp) {
                this.$refs.ruleForm.validate(res => {
                    if (res) {
                        this.$message.success(JSON.stringify(res));
                        let param = {
                            uname: this.account.nickName,
                            emailVarchar: this.account.username,
                            passwordVarchar: this.account.password,
                            tel: this.account.mobile,
                        };
                        this.$api.post(
                            '/cj_user/register',
                            param,
                            success => {
                                this.$message.success('注册成功');
                                // console.log(success);
                            },
                            fal => {
                                this.$message.error(fal);
                            }
                        );
                    } else {
                        return false;
                    }
                });
            } else {
                if (!this.account.username || !this.account.password) {
                    return this.$message.warning('用户名和密码不能为空');
                }
                this.isLoging = true;
                let params =
                    'username=' +
                    encodeURIComponent(this.account.username) +
                    '&password=' +
                    encodeURIComponent(this.account.password) +
                    '&rememberMe=' +
                    this.isRemember;
                // this.$router.push({ path: '/index' });
                this.$api.post(
                    '/security/login',
                    params,
                    success => {
                        if (this.isRemember) {
                            let account = JSON.stringify(this.account);
                            this.setCookie('account', account, 3);
                        } else {
                            this.setCookie('account', '');
                        }
                        let name = {
                            username: this.account.username,
                            nickName: success,
                        };
                        sessionStorage.setItem('account', JSON.stringify(name));
                        this.isLoging = false;
                        // this.$message.success('登录成功');
                        let q = this.getQuery();
                        if (q && q.formId) {
                            this.$router.push({
                                path: '/qrCodeTypeIn',
                                query: { formId: q.formId },
                            });
                        } else {
                            this.$router.push({ path: '/index' });
                        }
                    },
                    fal => {
                        this.isLoging = false;
                        this.$message.error(fal);
                    }
                );
            }
        },
        getCookie(cname) {
            var name = cname + '=';
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) === 0) {
                    return this.strUncode(c.substring(name.length, c.length));
                }
            }
            return '';
        },
        setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
            var expires = 'expires=' + d.toGMTString();
            document.cookie =
                cname + '=' + this.strEncode(cvalue) + '; ' + expires;
        },
        getQuery() {
            let param = {};
            let str = window.location.href.split('?');
            if (str.length === 2) {
                let strArr = window.location.href.split('?')[1].split('&');
                strArr.forEach(item => {
                    let s = item.split('=');
                    s.length === 2 ? (param[s[0]] = s[1]) : null;
                });
            }
            // console.log(param);
            return param;
        },
        strEncode(code) {
            var c = String.fromCharCode(code.charCodeAt(0) + code.length);
            for (let i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) + code.charCodeAt(i - 1)
                );
            }
            return encodeURIComponent(c);
        },
        strUncode(code) {
            code = decodeURIComponent(code);
            var c = String.fromCharCode(code.charCodeAt(0) - code.length);
            for (var i = 1; i < code.length; i++) {
                c += String.fromCharCode(
                    code.charCodeAt(i) - c.charCodeAt(i - 1)
                );
            }
            return c;
        },
        activeSceneKindClick(e) {
            let id = e.currentTarget.dataset.id;
            let nodeList = e.currentTarget.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
            this.activeSceneItem = id;
        },
        liveCaseItemCLick(e) {
            // let id = e.currentTarget.dataset.id;
            let nodeList = e.currentTarget.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
        },
        liveCaseSwitch(value) {
            // let nodeList = e.currentTarget.parentNode.parentNode.children;
            // nodeList = Array.from(nodeList);
            // for(let ii in nodeList){
            //     nodeList[ii].classList.remove('selected')
            // }
            // e.currentTarget.parentNode.classList.add('selected');
            this.cooperateCaseListThree.forEach(item => {
                item.selected = '';
                if (value.index === item.index) {
                    item.selected = 'selected';
                }
            });

            this.caseIndex = value.index;
        },
        userAppraiseSwitch(value) {
            this.userAppraiseImages.forEach(item => {
                item.selected = '';
                if (value.index === item.index) {
                    item.selected = 'selected';
                }
            });

            this.userAppraiseIndex = value.index;
        },
        userAppraiseItemCLick(e) {
            let nodeList = e.currentTarget.parentNode.parentNode.children;
            nodeList = Array.from(nodeList);
            for (let ii in nodeList) {
                nodeList[ii].children[0].classList.remove('selected');
            }
            e.currentTarget.classList.add('selected');
        },
        createQrcode(value) {
            QRCode.toDataURL(value)
                .then(url => {
                    this.qrCodeUrl = url;
                })
                .catch(err => {
                    console.error(err);
                });
        },
        loadImg() {
            var img = document.getElementsByClassName('data-img')[0];
            if (img) {
                img.style.width = document.documentElement.clientWidth + 'px';
                img.style.height =
                    (document.documentElement.clientWidth * 216) / 1366 + 'px';
            }
        },
        loadImg1() {
            var img = document.getElementsByClassName('ad-img')[0];
            if (img) {
                img.style.width = document.documentElement.clientWidth + 'px';
                img.style.height =
                    (document.documentElement.clientWidth * 274) / 1366 + 'px';
            }
        },
        imgLoad() {
            var img = document.getElementsByClassName('carouselHeight')[0];
            if (img) {
                this.carouselHeight =
                    (document.documentElement.clientWidth * 700) / 1920;
            }
        },
    },
};
</script>

<style lang="scss">
.pc-body {
    font-family: Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC,
        Microsoft YaHei, sans-serif;
    .swiper-container {
        .loop-swiper {
            .el-carousel__button {
                width: 24px;
                height: 5px;
                border-radius: 2px;
                opacity: 1;
            }
            .el-carousel__indicator.is-active {
                button {
                    opacity: 1;
                    background-color: #1994fa;
                }
            }
            .el-carousel__indicators--horizontal {
                bottom: 10px;
            }
            .el-carousel__arrow {
                width: 100px;
                height: 100px;
                font-size: 24px;
                i {
                    transform: scale(2.5);
                }
            }
            img {
                width: 100%;
            }
        }
    }
    .active-scene {
        margin-top: 17px;

        .active-scene-title {
            text-align: center;
            font-size: 30px;
            color: #252525;
            margin: 23px auto 8px;
            font-family: 'MSJHBD';
        }
        .active-scene-describe {
            text-align: center;
            font-size: 16px;
            color: #999999;
            margin-bottom: 34px;
            font-family: 'MSJH';
        }
        .active-scene-kind {
            width: 800px;
            text-align: center;
            margin: 0 auto;
            ul {
                display: flex;
                justify-content: space-around;
                li {
                    list-style: none;
                    cursor: pointer;
                    padding: 11px;
                    position: relative;
                    border-bottom: 1px solid transparent;
                    &.active-scene-kind-item {
                        cursor: pointer;
                        & > div {
                            margin-bottom: 10px;
                            i {
                                width: 32px;
                                height: 30px;
                                display: inline-block;
                            }
                        }
                        span {
                            font-family: 'MSJHBD';
                        }
                    }
                    &.active-scene-kind-item.selected {
                        color: #ffaa00;
                        border-bottom: 1px solid #999;
                        &:after {
                            content: ' ';
                            width: 40%;
                            height: 3px;
                            background: #ffaa00;
                            display: block;
                            z-index: 10;
                            transition: width 0.1s ease-in-out;
                            position: absolute;
                            bottom: -2px;
                            left: 50%;
                            transform: translate(-50%, 0);
                        }
                    }
                    &.active-scene-kind-item:nth-child(1) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -25px -44px;
                        }
                    }
                    &.active-scene-kind-item:nth-child(2) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -22px -80px;
                        }
                    }
                    &.active-scene-kind-item:nth-child(3) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -25px -120px;
                        }
                    }
                    &.active-scene-kind-item:nth-child(4) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -25px -155px;
                        }
                    }
                    &.active-scene-kind-item.selected:nth-child(1) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -59px -44px;
                        }
                    }
                    &.active-scene-kind-item.selected:nth-child(2) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -57px -80px;
                        }
                    }
                    &.active-scene-kind-item.selected:nth-child(3) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -59px -120px;
                        }
                    }
                    &.active-scene-kind-item.selected:nth-child(4) {
                        i {
                            background: url('../assets/imgs/spritpng.png') -59px -155px;
                        }
                    }
                }
            }
        }
        .active-scene-container {
            width: 100%;
            margin-top: -4px; /*37-11*/
            // height: 500px;
            background: -webkit-linear-gradient(#fbfbfb, #e0e0e0);
            background: -o-linear-gradient(#fbfbfb, #e0e0e0);
            background: -moz-linear-gradient(#fbfbfb, #e0e0e0);
            background: linear-gradient(#fbfbfb, #e0e0e0);
            .active-scene-container-title {
                text-align: center;
                font-size: 12px;
                margin: 27px;
                padding-top: 27px;
                font-family: 'MSJH';
                span {
                    color: #ffaa00;
                }
                p {
                    color: #999999;
                    display: inline-block;
                }
            }
            .active-scene-container-item {
                display: flex;
                width: 1200px;
                margin: 0 auto;
                flex-wrap: wrap;
                justify-content: flex-start;
                transition: left 0.5s cubic-bezier(0.4, 0.6, 0.05, 1);
                -moz-transition: left 0.5s cubic-bezier(0.4, 0.6, 0.05, 1); /* Firefox 4 */
                -webkit-transition: left 0.5s cubic-bezier(0.4, 0.6, 0.05, 1); /* Safari ?? Chrome */
                -o-transition: left 0.5s cubic-bezier(0.4, 0.6, 0.05, 1); /* Opera */

                .container {
                    width: 25%;
                    box-sizing: border-box;
                    &:nth-child(4n + 1) {
                        padding-right: 16px;
                    }
                    &:nth-child(4n + 2),
                    &:nth-child(4n + 3) {
                        padding: 0 8px;
                    }
                    &:nth-child(4n) {
                        padding-left: 16px;
                    }
                    & > div {
                        .text-item-image {
                            border: 1px solid #e0ece3;
                            overflow: hidden;
                            .el-image {
                                height: 165px;
                                display: block;
                            }
                        }

                        &:hover .el-image {
                            animation: imgHover 0.5s ease-in-out forwards;
                            -moz-animation: imgHover 0.5s ease-in-out forwards; /* Firefox */
                            -webkit-animation: imgHover 0.5s forwards; /* Safari å’Œ Chrome */
                            -o-animation: imgHover 0.5s ease-in-out forwards;
                        }
                        .text-item-wrap {
                            margin-top: 10px;
                            margin-bottom: 20px;
                            .text-item {
                                text-align: center;
                                font-size: 14px;
                                margin-right: 17px;
                                font-family: 'MSJHBD';
                            }
                            // .text-item-dis {
                            //     font-size: 12px;
                            //     font-family: 'MSJH';
                            //     color: #999999;
                            // }
                        }
                    }
                }
            }
        }
    }

    .my-superiority {
        width: 100%;
        padding-bottom: 10px;
        background: -webkit-linear-gradient(#fbfbfb, #e0e0e0);
        background: -o-linear-gradient(#fbfbfb, #e0e0e0);
        background: -moz-linear-gradient(#fbfbfb, #e0e0e0);
        background: linear-gradient(#fbfbfb, #e0e0e0);
        .my-superiority-title {
            text-align: center;
            font-size: 30px;
            color: #252525;
            padding: 24px 0 5px;
            font-family: 'MSJHBD';
        }
        .my-superiority-describe {
            text-align: center;
            font-size: 16px;
            color: #999999;
            font-family: 'MSJH';
            /*margin-bottom: 34px;*/
        }
        .my-superiority-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 962px;
            margin: 28px auto;
            background: transparent;
            .container {
                width: 25%;
                padding: 0 15px;
                box-sizing: border-box;
                & > div {
                    margin-bottom: 15px;
                    box-shadow: 0 10px 6px #3333332b;
                    border: 1px solid #e0ece3;
                    img {
                        width: 100%;
                    }
                    .my-superiority-content-top {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #f1f1f1;
                    }
                    .my-superiority-content-down {
                        text-align: center;
                        padding: 10px 20px;
                        background: #ffff;
                        height: 95px;
                        label {
                            color: #067de0;
                            font-size: 20px;
                            font-family: 'MSJHBD';
                        }
                        p {
                            color: #666666;
                            font-size: 12px;
                            margin-top: 10px;
                            text-align: left;
                            font-family: 'MSJH';
                        }
                    }
                }
            }
        }
    }

    .live-case {
        .live-case-title {
            text-align: center;
            font-size: 30px;
            color: #252525;
            margin: 14px;
            font-family: 'MSJHBD';
        }
        .live-case-content {
            .live-case-content-body {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                width: 1200px;
                padding: 0 35px;
                box-sizing: border-box;
                margin: 0 auto;
                .container {
                    width: 33.3%;
                    padding: 0 15px;
                    box-sizing: border-box;
                    .el-image {
                        width: 100%;
                    }
                    & > div {
                        text-align: center;
                        height: 200px;
                        margin-bottom: 13px;
                        box-sizing: border-box;
                        padding: 0 10px;
                        .el-image {
                            height: 178px;
                        }
                        &:hover {
                            background: #f3f3f3;
                        }
                        .text-item-wrap {
                            text-align: center;
                            padding-top: 12px;
                            font-family: 'MSJH';
                        }
                    }
                }
            }
        }
        .live-case-switch {
            height: 25px;
            position: relative;
            .live-case-switch-ul {
                left: 50%;
                top: -40%;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                position: absolute;
                cursor: pointer;
                .live-case-switch-li {
                    display: inline-block;
                    padding: 12px 4px;
                    background-color: transparent;
                    cursor: pointer;
                    &.selected {
                        button {
                            background-color: #1994fa;
                        }
                    }
                    button {
                        width: 24px;
                        height: 5px;
                        border-radius: 2px;
                        opacity: 1;
                        display: block;
                        /*opacity: .48;*/
                        /*width: 30px;*/
                        /*height: 2px;*/
                        background-color: #c4c2c3;
                        border: none;
                        outline: 0;
                        padding: 0;
                        margin: 0;
                        cursor: pointer;
                        -webkit-transition: 0.3s;
                        transition: 0.3s;
                    }
                }
            }
        }
    }

    .user-appraise {
        .user-appraise-title {
            text-align: center;
            font-size: 30px;
            color: #252525;
            padding: 24px 0 6px;
            font-family: 'MSJHBD';
        }
        .user-appraise-describe {
            text-align: center;
            font-size: 16px;
            color: #999999;
            font-family: 'MSJH';
        }
        .user-appraise-content {
            background: #fbfbfb;
            margin-top: 30px;
            .user-appraise-content-wrap {
                display: flex;
                width: 1200px;
                margin: 0 auto;
                flex-wrap: wrap;
                justify-content: flex-start;
                padding-top: 21px;
                .container {
                    width: 25%;
                    padding: 0 15px;
                    box-sizing: border-box;
                    & > div {
                        margin: 10px 0;
                        -moz-box-shadow: 3px 8px 6px -2px #3333332b,
                            -3px 6px 6px -2px #3333332b;
                        -webkit-box-shadow: 3px 8px 6px -2px #3333332b,
                            -3px 6px 6px -2px #3333332b;
                        box-shadow: 3px 8px 6px -2px #3333332b,
                            -3px 6px 6px -2px #3333332b;
                        background: #fff;
                        -webkit-transition: all 0.3s ease-out;
                        -moz-transition: all 0.3s ease;
                        -o-transition: all 0.3s ease;
                        border: 3px solid transparent;
                        .image-wrap {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 120px;
                            position: relative;
                            .el-image {
                                display: block;
                                width: 80px;
                                height: 80px;
                                border-radius: 50%;
                                overflow: hidden;
                            }
                            div.image-wrap-back {
                                display: block;
                                width: 95px;
                                height: 95px;
                                border-radius: 50%;
                                overflow: hidden;
                                /* content: ' '; */
                                position: absolute;
                                background: #f3f3f3;
                            }
                        }
                        .user-appraise-content-name {
                            font-size: 18px;
                            color: #252525;
                            text-align: center;
                            font-family: 'MSJHBD';
                        }
                        .user-appraise-content-star {
                            width: 100px;
                            margin: 10px auto;
                            background: url('../assets/imgs/spritpng.png') -20px -190px;
                            height: 20px;
                        }
                        .user-appraise-content-say {
                            font-size: 13px;
                            color: #666666;
                            position: relative;
                            font-family: 'MSJH';
                            div {
                                margin: 17px;
                                background: #f3f3f3;
                                padding: 12px;
                                border-radius: 10px;
                                line-height: 22px;
                                height: 120px;
                            }
                            .triangle-one {
                                position: absolute;
                                left: 13%;
                                top: -29px;
                                width: 0;
                                height: 0;
                                border-style: solid;
                                border-color: transparent #f3f3f3 transparent
                                    transparent;
                                border-width: 13px 25px 0 0;
                                background: #fff;
                                border-radius: 0;
                                padding: 0;
                            }
                            .d3 {
                                margin-left: 10px;
                                float: left;
                                width: 0;
                                height: 0;
                                border-width: 100px;
                                border-style: solid;
                                border-color: #da4040 transparent transparent
                                    transparent;
                            }
                        }
                        // &.selected,
                        &:hover {
                            border: 3px solid #1994fa;
                        }
                    }
                }
            }
        }
        .user-appraise-switch {
            height: 40px; /*21+21+5*/
            position: relative;
            .user-appraise-switch-ul {
                /* left: 50%;
                     -webkit-transform: translateX(-50%);
                     transform: translateX(-50%);
                     position: absolute;*/
                display: flex;
                width: 100px;
                margin: 0 auto;
                list-style: none;
                justify-content: center;
                cursor: pointer;
                .user-appraise-switch-li {
                    display: inline-block;
                    padding: 20px 4px;
                    background-color: transparent;
                    cursor: pointer;
                    &.selected {
                        button {
                            background-color: #1994fa;
                        }
                    }
                    button {
                        width: 24px;
                        height: 5px;
                        border-radius: 2px;
                        opacity: 1;
                        display: block;

                        background-color: #c4c2c3;
                        border: none;
                        outline: 0;
                        padding: 0;
                        margin: 0;
                        cursor: pointer;
                        -webkit-transition: 0.3s;
                        transition: 0.3s;
                    }
                }
            }
        }
    }

    .data-statistics {
        width: 100%;
        .data-statistics-title {
            text-align: center;
            font-size: 30px;
            color: #252525;
            padding: 17px 0 20px;
            font-family: 'MSJHBD';
        }
        .data-statistics-content {
            background: #fbfbfb;
        }
    }

    .some-customers {
        .some-customers-title {
            text-align: center;
            font-size: 30px;
            color: #252525;
            padding: 33px 0 24px;
            font-family: 'MSJHBD';
        }
        .some-customers-content {
            background: #fbfbfb;
            background: -webkit-linear-gradient(#fbfbfb, #e0e0e0);
            background: -o-linear-gradient(#fbfbfb, #e0e0e0);
            background: -moz-linear-gradient(#fbfbfb, #e0e0e0);
            background: linear-gradient(#fbfbfb, #e0e0e0);
            .some-customers-content-wrap {
                width: 1200px;
                margin: 0 auto;
                .some-customers-content-items {
                    display: flex;
                    flex-wrap: wrap;
                    padding-top: 18px;
                    justify-content: flex-start;
                    .container {
                        width: 16.66%;
                        box-sizing: border-box;
                        padding: 0 8px;
                        & > div {
                            margin: 8px 0;
                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }

    .pc-ad {
        margin-top: 25px;
        margin-bottom: -4px;
        img {
            cursor: pointer;
        }
    }

    .arrow {
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-bottom-color: #7ac161;
        position: absolute;
        content: '';
    }

    @keyframes imgHover {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.2);
        }
    }
    @-moz-keyframes imgHover {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.2);
        }
    }
    @-webkit-keyframes imgHover {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.2);
        }
    }
    @-o-keyframes imgHover {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.2);
        }
    }
}
@media screen and (max-width: 1200px) {
    .pc-body {
        .active-scene {
            .active-scene-container {
                .active-scene-container-item {
                    width: 100%;
                }
            }
        }

        .live-case {
            .live-case-content {
                .live-case-content-body {
                    width: 100%;
                }
            }
        }

        .user-appraise {
            .user-appraise-content {
                .user-appraise-content-wrap {
                    width: 100%;
                }
            }
        }

        .some-customers {
            .some-customers-content {
                .some-customers-content-wrap {
                    width: 100%;
                }
            }
        }

        .arrow {
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-bottom-color: #7ac161;
            position: absolute;
            content: '';
        }

        @keyframes imgHover {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }
        @-moz-keyframes imgHover {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }
        @-webkit-keyframes imgHover {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }
        @-o-keyframes imgHover {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }
    }
}
@media screen and (max-width: 962px) {
    .pc-body {
        .my-superiority {
            .my-superiority-content {
                flex-wrap: wrap;
                width: 100%;
            }
        }
    }
}
@media screen and (max-width: 800px) {
    .pc-body {
        .active-scene {
            .active-scene-kind {
                width: 100%;
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .pc-body {
        .active-scene {
            .active-scene-title {
                font-size: 20px;
            }
            .active-scene-describe {
                font-size: 12px;
            }
            .active-scene-kind {
                ul {
                    li {
                        &.active-scene-kind-item {
                            span {
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
            .active-scene-container {
                .active-scene-container-item {
                    .container {
                        width: 50%;
                        &:nth-child(odd) {
                            padding: 0 0 0 16px;
                        }
                        &:nth-child(even) {
                            padding: 0 8px 0 0;
                        }
                    }
                }
            }
        }
        .my-superiority {
            .my-superiority-title {
                font-size: 20px;
                padding: 24px 0 5px;
            }
            .my-superiority-describe {
                font-size: 12px;
            }
            .my-superiority-content {
                .container {
                    width: 50%;
                    padding: 0 15px;
                    & > div {
                        .my-superiority-content-down {
                            height: 105px;
                        }
                    }
                }
            }
        }
        .user-appraise {
            .user-appraise-title {
                font-size: 20px;
            }
            .user-appraise-describe {
                font-size: 12px;
            }
            .user-appraise-content {
                .user-appraise-content-wrap {
                    .container {
                        width: 80%;
                        margin: 0 auto;
                    }
                }
            }
        }
        .live-case {
            .live-case-title {
                font-size: 20px;
            }
            .live-case-content {
                .live-case-content-body {
                    padding: 0;
                    .container {
                        width: 100%;
                    }
                }
            }
        }
        .data-statistics {
            .data-statistics-title {
                font-size: 20px;
            }
        }
        .some-customers {
            .some-customers-title {
                font-size: 20px;
            }
            .some-customers-content {
                .some-customers-content-wrap {
                    .some-customers-content-items {
                        .container {
                            width: 33.3%;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 320px) {
    .pc-body {
        .my-superiority {
            .my-superiority-content {
                .container {
                    & > div {
                        .my-superiority-content-down {
                            height: 115px;
                            label {
                                color: #067de0;
                                font-size: 16px;
                                font-family: 'MSJHBD';
                            }
                        }
                    }
                }
            }
        }
        .user-appraise {
            .user-appraise-content {
                .user-appraise-content-wrap {
                    .container {
                        width: 95%;
                    }
                }
            }
        }
    }
}
</style>